import React, { Component } from 'react'
import { Button, Modal, Select, Form, Row, Col, Input, Radio, Table, DatePicker } from 'antd';
import BaseComponent from '@/components/BaseComponent';
import { connect } from 'dva';



@connect(({ user }) => ({
    // data: risk.riskData,
    currentUser: user.currentUser,
}))
export default class index extends BaseComponent {
    state = {
        visible: false,
        form: {},
        sgblCodeData: [],
        bmblCodeData: [],
        wblCodeData: [],
        sezcCodeData: [],

    };

    showModal = () => {
        this.findAllDictName()
        this.setState({
            visible: true,
        });

    };

    handleOk = () => {
        this.setState({
            visible: false,
        });
    };

    handleCancel = () => {
        this.setState({
            visible: false,
        });
    };

    nameChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                name: value
            }
        }));
    }
    id_cardChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                id_card: value
            }
        }));
    }
    screening_idChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                screening_id: value
            }
        }));
    }
    phoneChange = (e) => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                phone: value
            }
        }));
    }
    sgblCodeChange = (value) => {
        this.setState((params) => ({
            form: {
                ...params.form,
                sgbl_code: value
            }
        }));
    }
    bmblCodeChange = (value) => {
        this.setState((params) => ({
            form: {
                ...params.form,
                bmbl_code: value
            }
        }));
    }
    wblCodeChange = (value) => {
        this.setState((params) => ({
            form: {
                ...params.form,
                wbl_code: value
            }
        }));
    }
    sezcCodeChange = (value) => {
        this.setState((params) => ({
            form: {
                ...params.form,
                sezc_code: value
            }
        }));
    }
    treatChange = e => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                treat: value
            }
        }));
    };
    noticeChange = e => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                notice: value
            }
        }));
    };
    contactChange = e => {
        const value = e.target.value;
        this.setState((params) => ({
            form: {
                ...params.form,
                contact: value
            }
        }));
    };




    /**详情*/
    selById = () => {
        this.execHttp('followUpFormalDatabase/selById', {
            id: this.props.record.id
        }).then(resp => {
            if (resp && resp.success) {
                this.setState({
                    form: resp.data,
                })
            }
        });
    };
    //字典
    findAllDictName = () => {
        this.execHttp('treatmentList/findAllDictName').then(resp => {
            if (resp && resp.success) {
                this.setState({
                    sgblCodeData: resp.data.sgbl_code,
                    bmblCodeData: resp.data.bmbl_code,
                    wblCodeData: resp.data.wbl_code,
                    sezcCodeData: resp.data.sezc_code,
                })
                this.selById()

            }
        });
    };


    render() {
        const columns = [
            {
                title: '随访次数',
                dataIndex: 'number',
                key: 'number',

            },
            {
                title: '计划随访时间',
                dataIndex: 'planTime',
                key: 'planTime',
            },
            {
                title: '实际随访时间',
                dataIndex: 'actualTime',
                key: 'actualTime',

            },
            {
                title: '食管最高病例代码',
                dataIndex: 'esophagus',
                key: 'esophagus',
                render: (text, record, index) => {
                    const { esophagus } = record
                    const str = this.state.sgblCodeData
                        .filter(item => item.dictValue === esophagus)
                        .map(item => item.dictName);
                    return <span>{str}</span>;
                },
            },
            {
                title: '贲门最高病理代码',
                dataIndex: 'cardia',
                key: 'cardia',
                render: (text, record, index) => {
                    const { cardia } = record
                    const str = this.state.bmblCodeData
                        .filter(item => item.dictValue === cardia)
                        .map(item => item.dictName);
                    return <span>{str}</span>;
                },

            },
            {
                title: '胃最高病理代码',
                dataIndex: 'stomach',
                key: 'stomach',
                render: (text, record, index) => {
                    const { stomach } = record
                    const str = this.state.wblCodeData
                        .filter(item => item.dictValue === stomach)
                        .map(item => item.dictName);
                    return <span>{str}</span>;
                },

            },
            {
                title: '十二指肠最高病理代码',
                dataIndex: 'duodenum',
                key: 'duodenum',
                render: (text, record, index) => {
                    const { duodenum } = record
                    const str = this.state.sezcCodeData
                        .filter(item => item.dictValue === duodenum)
                        .map(item => item.dictName);
                    return <span>{str}</span>;
                },
            },

        ];
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };

        const { visible, form } = this.state;

        return (
            <div>
                <Button type="primary" onClick={this.showModal} >查看</Button>
                <Modal
                    title="查看"
                    visible={visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width={1500}
                >
                    <h3>基本信息</h3>
                    <Form {...formItemLayout} >
                        <Row gutter={16}>
                            <Col span={6}>
                                <Form.Item label="姓名">
                                    <Input placeholder="姓名" disabled value={form.name} onChange={this.nameChange} style={{ width: 200 }} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="身份证">
                                    <Input placeholder="身份证" disabled value={form.id_card} onChange={this.id_cardChange} style={{ width: 200 }} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="调查对象ID号">
                                    <Input placeholder="调查对象ID号" disabled value={form.screening_id} onChange={this.screening_idChange} style={{ width: 200 }} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="联系电话">
                                    <Input placeholder="联系电话" value={form.phone} onChange={this.phoneChange} style={{ width: 200 }} disabled />
                                </Form.Item>
                            </Col>
                        </Row>

                        <h3>随访人员的病理结果</h3>

                        <Row gutter={16} >
                            <Col span={6}>
                                <Form.Item label="食管最高病理诊断代码(初筛)">
                                    <Select allowClear  value={form.sgbl_code} onChange={this.sgblCodeChange} style={{ width: 200 }} disabled placeholder="请选择食管最高病理诊断代码">
                                        {this.state.sgblCodeData.map(item => (
                                            <Select.Option key={item.dictValue}>{'(' + item.dictValue + ')' + item.dictName}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="贲门最高病理诊断代码(初筛)">
                                    <Select allowClear value={form.bmbl_code} onChange={this.bmblCodeChange} style={{ width: 200 }} disabled placeholder="请选择贲门最高病理诊断代码">
                                        {this.state.bmblCodeData.map(item => (
                                            <Select.Option key={item.dictValue}>{'(' + item.dictValue + ')' + item.dictName}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="胃最高病理诊断代码(初筛)">
                                    <Select allowClear value={form.wbl_code} onChange={this.wblCodeChange} style={{ width: 200 }} disabled placeholder="请选择胃最高病理诊断代码">
                                        {this.state.wblCodeData.map(item => (
                                            <Select.Option key={item.dictValue}>{'(' + item.dictValue + ')' + item.dictName}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
         
                                <Form.Item label="十二指肠最高病理诊断代码(初筛)">
                       

                                    <Select allowClear value={form.sezc_code} onChange={this.sezcCodeChange} style={{ width: 200 }} disabled placeholder="请选择十二指肠最高病理诊断代码">
                                        {this.state.sezcCodeData.map(item => (
                                            <Select.Option key={item.dictValue}>{'(' + item.dictValue + ')' + item.dictName}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>

                        <h3>流行病随访</h3>
                        <Row gutter={16} >
                            <Col span={6}>
                                <Form.Item label="最后接触状态">
                                    <Radio.Group value={form.contact} onChange={this.contactChange} disabled >
                                        <Radio value={1}>存活</Radio>
                                        <Radio value={2}>死亡</Radio>
                                        <Radio value={3}>失访</Radio>
                                    </Radio.Group>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="是否治疗">
                                    <Radio.Group value={form.treat} onChange={this.treatChange} disabled >
                                        <Radio value={1}>治疗</Radio>
                                        <Radio value={2}>未治疗</Radio>
                                        <Radio value={3}>不明</Radio>
                                    </Radio.Group>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="是否通知随访">
                                    <Radio.Group value={form.notice} onChange={this.noticeChange} disabled >
                                        <Radio value={1}>是</Radio>
                                        <Radio value={2}>否</Radio>
                                    </Radio.Group>
                                </Form.Item>
                            </Col>

                        </Row>

                        <h3>随访情况</h3>
                        <Table columns={columns} dataSource={form.followUpConditionOfficeList} rowKey='id' />

                    </Form>

                </Modal>


            </div>
        )
    }
}
